<template>
<!-- 人员发展 -->
  <div class="morning-container">
    <div class="personal-detail">
      <board-title v-if="isFz()" title="发展" bgclass="bg-fz">
        <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_fz.png" />
        <div slot="other-time" class="flag-time">
          <date-time ref="dataTimeRefmonth" datetype="year-month" @date="handleChange"/>
        </div>
      </board-title>
      <board-title v-if="isWx()" title="维系" bgclass="bg-wx">
        <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_wx.png" />
        <div slot="other-time" class="flag-time">
          <date-time ref="dataTimeRefmonth" datetype="year-month" @date="handleChange"/>
        </div>
      </board-title>
      <board-title v-if="isZj()" title="智家" bgclass="bg-zj">
        <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_zj.png" />
        <div slot="other-time" class="flag-time">
          <date-time ref="dataTimeRefmonth" datetype="year-month" @date="handleChange"/>
        </div>
      </board-title>
      <board-title v-if="isSr()" title="收入" bgclass="bg-sr">
        <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_sr.png" />
        <div slot="other-time" class="flag-time">
          <date-time ref="dataTimeRefmonth" datetype="year-month" @date="handleChange"/>
        </div>
      </board-title>
      <board-title v-if="type === 'arrear'"  title="欠费" bgclass="bg-qf">
        <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_qf.png" />
        <div slot="other-time" class="flag-time">
          <date-time ref="dataTimeRefmonth" datetype="year-month" @date="handleChange"/>
        </div>
      </board-title>
      <!-- 发展、维系、智家、收入 -->
      <div class="detail-info-base" v-if="type !== 'arrear'">
        <div class="title">{{ title[type] }}</div>
        <div class="info-item">
          <div class="value-title">
            <span class="sub-title">当月累计/本年累计</span>
            <span class="value">
              {{ value }}/{{ mvalue }}
              <span v-if="isSr()" class="unit">万元</span>
              <span v-else class="unit">户</span>
            </span>
          </div>
          <div class="percent-title">
            <span class="sub-title">环比</span>
            <span v-if="hb >= 0" class="percent up">
              {{ hb }}%
              <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
            </span>
            <span v-else class="percent down">
              {{ hb }}%
              <img src="~@/assets/imgs/publicline/index/arrow_down.png" />
            </span>
          </div>
        </div>
        <van-loading v-show="loadLineCom" type="spinner" color="#1989fa" />
        <div v-show="!loadLineCom">
          <div v-if="comLen == 0" class="no-data">暂无历史数据</div>
          <board-line v-else ref="boardLineRefCom" />
        </div>
      </div>
      <!-- 欠费 -->
      <div class="detail-info-base" v-else>
        <span class="title">总欠费</span>
        <span class="value">{{ value }}<span class="unit">万元</span></span>
        <van-loading v-show="loadLineArrear" type="spinner" color="#1989fa" />
        <div v-show="!loadLineArrear">
          <div v-if="arrearLen == 0" class="no-data">暂无历史数据</div>
          <board-line v-else ref="boardLineRefArrear" />
        </div>
      </div>
    </div>
    <van-loading v-if="loadListCom" type="spinner" color="#1989fa" />
    <div v-else class="morning-personal-list">
      <div class="detail-info" v-for="item in personList" :key="item.LEVEL_ID">
        <div class="item-img">
          <img class="item-img-user" src="~@/assets/imgs/publicline/board/icon-users.png" />
        </div>
        <div class="info-content">
          <div class="info-detail">
            <span class="info-name">{{ item.LEVEL_NAME }}</span>
            <span v-if="isSr()" class="info-flag">{{ item.LEVEL_ID }}</span>
            <span v-else class="info-flag">{{ item.CALC_OBJ_TYPE_DESC }}</span>
          </div>
          <!-- 欠费 -->
          <div class="item-detail" v-if="type === 'arrear'">
            <div class="item-left">
              <span class="info-desc">欠费总额</span>
              <span class="item-value">{{ item.QF_TOTLE || 0 }}<span class="unit">万元</span></span>
            </div>
            <div class="percent-title" style="margin-left: 24px">
              <span class="info-desc">欠费用户数</span>
              <span class="item-value">{{ item.QF_USER || 0 }}<span class="unit">户</span></span>
            </div>
          </div>
          <!-- 发展、维系、智家、收入 -->
          <div v-else>
            <div class="info-desc">
              当月累计/本年累计
              <span style="padding-left: 20px; color: #FD806E;font-size: 14px;">{{ item.KPI_VALUE || 0 }}/{{ item.TOTAL_VALUE || 0 }}</span>
              <span v-if="isSr()" class="unit">万元</span>
              <span v-else class="unit">户</span>
            </div>
            <div class="percent-title">
              <span class="info-desc">环比</span>
              <span v-if="item.HB >= 0" class="percent up">
                {{ item.HB }}%
                <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
              </span>
              <span v-else-if="item.HB < 0" class="percent down">
                {{ item.HB }}%
                <img src="~@/assets/imgs/publicline/index/arrow_down.png" />
              </span>
              <span v-else class="percent down">
                --
              </span>
              <span class="info-desc" style="padding-left: 24px">同比</span>
              <span v-if="item.TB >= 0" class="percent up">
                {{ item.TB }}%
                <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
              </span>
              <span v-else-if="item.TB < 0" class="percent down">
                {{ item.TB }}%
                <img src="~@/assets/imgs/publicline/index/arrow_down.png" />
              </span>
              <span v-else class="percent down">
                --
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dateTime from '@/components/common/dateTime.vue'
import { accountDate } from '@/api/common.js'
import * as dayjs from "dayjs"

import boardTitle from '@/views/components/publicline/board/title.vue'
import boardLine from '@/views/components/publicline/board/line.vue'

import { kpiMonthPeople, arrearMonthPeople, kpiMonth, kpiMonthLineCom, kpiMonthLineArrear, morningMonthArrear, kpiMonthIncome, kpiMonthIncomePeople } from '@/api/publicline/board.js'

export default {
  components: { dateTime, boardTitle, boardLine },
  data() {
    return {
      loadLineCom: true,
      comLen: 0,
      loadLineArrear: true,
      arrearLen: 0,
      loadListCom: true,
      personList: [],
      monthId: '',
      type: '',
      value: 0,
      mvalue: 0,
      hb: 0,
      title: {
        'SN00101-090006M': '移网',
        'HX0010204-090006M': '宽带',
        'SN00106-090006M': '融合',
        'HX0010201-090006M': '固话',
        'SN001010402-090006M': '5G迁转',
        'SN001010403-090006M': '5G升级包',
        'SN001020402-090006M': '宽带提速包',
        'SN00102041-090006M': '宽带续约',
        'SN0020212-090006M': '公众创新',
        'SN001011-090006M': '套餐升档',
        'SN0010215-090006M': '沃家固话',
        'SN0010210-090006M': '沃家组网',
        'SN0010211-090006M': '沃家神眼',
        'SC00103-090006M': 'IPTV',
        'HX001-080002M': '出账收入',
        'HX00101-080002M': '移网出账收入',
        'SN007-080002M': '电子券减收',
        'SN005-080002M': '协同收入',
        'HX00102-080002M': '固网业务收入',
        'HX00199-080002M': '其他出账收入',
        'SN0011-080002M': '现金收入',
        'SN001024-080002M': '营业现费'
      }
    }
  },
  created() {
    this.type = this.$route.query.type
    this.monthId = dayjs(this.$route.query.monthId).format('YYYY-MM') || ''
    this.value = this.$route.query.value || 0
    this.mvalue = this.$route.query.mvalue || 0
    this.hb = this.$route.query.hb || 0
  },
  mounted() {
    this.getAccountMonthDate()
    this.search()
  },
  methods: {
    isFz() {
      const merge = ['SN00101-090006M', 'HX0010204-090006M', 'SN00106-090006M', 'HX0010201-090006M']
      return merge.includes(this.type)
    },
    isWx() {
      const merge = ['SN001010402-090006M', 'SN001010403-090006M', 'SN001020402-090006M', 'SN00102041-090006M', 'SN0020212-090006M', 'SN001011-090006M']
      return merge.includes(this.type)
    },
    isZj() {
      const merge = ['SN0010215-090006M', 'SN0010210-090006M', 'SN0010211-090006M', 'SC00103-090006M']
      return merge.includes(this.type)
    },
    isSr() {
      const merge = ['HX001-080002M', 'HX00101-080002M', 'SN007-080002M', 'SN005-080002M', 'HX00102-080002M', 'HX00199-080002M', 'SN0011-080002M', 'SN001024-080002M']
      return merge.includes(this.type)
    },
    // 获取月账期
    async getAccountMonthDate() {
      const res = await accountDate({ PARAMCODE: 'M' })
      const { result, success } = res
      if (success) {
        this.$refs.dataTimeRefmonth.initDateTime(this.monthId, dayjs(result[0].value).format('YYYY-MM'))
      }
    },
    // 获取改变的账期
    handleChange(val) {
      this.monthId = val
      if(this.type == 'arrear') {
        this.getMorningMonthArrear()
      }
      if(this.isFz() || this.isWx() || this.isZj()) {
        this.getKpiMonth()
      }
      this.search()
    },
    search() {
      if(this.type === 'arrear') {
        this.getKpiMonthArrearLine()
        this.getArrearPeopleDetail()
      }
      if(this.isSr()) {
        this.getKpiMonthIncome()
        this.getKpiMonthComLine()
        this.getIncomePeopleDetail()
      }
      if(this.isFz() || this.isWx() || this.isZj()) {
        this.getKpiMonthComLine()
        this.getKpiPeopleDetail()
      }
    },
    // 获取晨会发展、维系、智家单一指标
    async getKpiMonth() {
      const res = await kpiMonth({ kpicode: this.type, orgId: this.$dataPermission, monthId: dayjs(this.monthId).format('YYYYMM') })
      const { result, success } = res
      if (success) {
        const info = result[0] || {}
        this.value = info.KPI_VALUE || 0
        this.mvalue = info.TOTAL_VALUE || 0
        this.hb = info.HB || 0
      }
    },
    // 获取晨会收入单一指标
    async getKpiMonthIncome() {
      const res = await kpiMonthIncome({ kpiCode: this.type, orgId: this.$dataPermission, monthId: dayjs(this.monthId).format('YYYYMM') })
      const { result, success } = res
      if (success) {
        const info = result[0] || {}
        this.value = info.KPI_VALUE || 0
        this.mvalue = info.TOTAL_VALUE || 0
        this.hb = info.HB || 0
      }
    },
    // 获取晨会发展、维系、智家、 收入折线
    async getKpiMonthComLine() {
      this.loadLineCom = true
      const res = await kpiMonthLineCom({ kpiCode: this.type, orgId: this.$dataPermission, monthId: dayjs(this.monthId).format('YYYYMM') })
      const { result, success } = res
      if (success) {
        this.comLen = result.length
        if(this.comLen != 0) {
          this.$nextTick(() => {
            this.$refs.boardLineRefCom.initLine(this.groupData(result, 'ACCT_MONTH'), this.groupData(result, 'monOnlineUser'))
          })
        }
        this.loadLineCom = false
      }
    },
    // 晨会看板-月看板-欠费
    async getMorningMonthArrear() {
      const res = await morningMonthArrear({ orgId: this.$dataPermission, monthId: dayjs(this.monthId).format('YYYYMM') })
      const { result, success } = res
      if (success) {
        const info = result[0] || {}
        this.value = info.QF_VALUE || 0
      }
    },
    // 获取晨会欠费 折线
    async getKpiMonthArrearLine() {
      this.loadLineArrear = true
      const res = await kpiMonthLineArrear({ orgId: this.$dataPermission, monthId: dayjs(this.monthId).format('YYYYMM') })
      const { result, success } = res
      if (success) {
        this.arrearLen = result.length
        if(this.arrearLen != 0) {
          this.$nextTick(() => {
            this.$refs.boardLineRefArrear.initLine(this.groupData(result, 'MONTH_ID'), this.groupData(result, 'DSUM'))
          })
        }
        this.loadLineArrear = false
      }
    },
    // 获取晨会发展、维系、智家人员指标
    async getKpiPeopleDetail() {
      this.loadListCom = true
      const params = {
        kpicode: this.type,
        orgId: this.$gridId,
        monthId: dayjs(this.monthId).format('YYYYMM'),
        loginId: this.$isCeo ? '' : this.$dataPermission
      }
      const res = await kpiMonthPeople(params)
      const { result, success } = res
      if (success) {
        this.personList = result
        this.loadListCom = false
      }
    },
    // 获取收入人员指标
    async getIncomePeopleDetail() {
      this.loadListCom = true
      const params = {
        kpiCode: this.type,
        orgId: this.$gridId,
        monthId: dayjs(this.monthId).format('YYYYMM'),
        loginId: this.$isCeo ? '' : this.$dataPermission
      }
      const res = await kpiMonthIncomePeople(params)
      const { result, success } = res
      if (success) {
        this.personList = result
        this.loadListCom = false
      }
    },
    // 获取欠费人员指标
    async getArrearPeopleDetail() {
      this.loadListCom = true
      const params = {
        orgId: this.$gridId,
        monthId: dayjs(this.monthId).format('YYYYMM'),
        loginId: this.$isCeo ? '' : this.$dataPermission
      }
      const res = await arrearMonthPeople(params)
      const { result, success } = res
      if (success) {
        this.personList = result
        this.loadListCom = false
      }
    },
    groupData(data, key) {
      const value = []
      data.map(item => {
        if(this.isSr() && key == 'monOnlineUser') {
          value.push(this.toTenThousand(item[key]))
        } else {
          value.push(item[key])
        }
        return item
      })
      return value
    },
    toTenThousand(value) {
      let num = value.toString()
      const size = (num / 10000).toFixed(2)
      return size
    },
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/person.less';
.percent-title {
  font-size: 12px;
  .percent {
    padding-left: 8px;
  }
  .up {
    color: #FF6024;
  }
  .down {
    color: #40BB3F;
  }
  img {
    width: 11px;
  }
}
.morning-container {
  .personal-detail {
    background: #FFFFFF;
    box-shadow: 0 2px 4px 1px #f3f7fa;
    border-radius: 6px;
    margin: 12px 8px 6px;

    .detail-info-base {
      padding: 4px 16px 6px 34px;
      .title {
        margin-top: 4px;
        color: #333;
      }
      .info-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .value-title .title::before {
        content: '';
        width: 6px;
        height: 6px;
        border: 1px solid #4d98ff;
        display: inline-block;
        border-radius: 4px;
        margin-right: 8px;
        margin-left: -12px;
      }
      .sub-title {
        font-size: 12px;
        color: #999;
      }
      .value {
        padding-left: 8px;
        font-size: 20px;
        color: #4D98FF;
      }
      .unit {
        font-size: 14px;
      }
    }
  }
}
.morning-personal-list {
  .detail-info {
    .info-content {
      margin-left: 16px;
    }
    .item-detail {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      text-align: center;
    }
    .item-value {
      padding-left: 8px;
      width: unset;
    }
  }
}
/deep/ .seller {
  .van-cell,
  .van-cell--clickable:active {
    background-color: unset;
  }
  .van-cell::after {
    border-bottom: unset;
  }
}
/deep/ .van-loading {
  text-align: center;
  padding: 40px 0;
}
.no-data {
  padding: 40px 0;
  text-align: center;
  color: #666;
}
</style>